[Review] React 開發者一定要知道的底層機制 — React Fiber Reconciler

React 開發者一定要知道的底層機制 — React Fiber Reconciler - Starbugs Weekly 星巴哥技術專欄 - Medium.md

React Fiber 其實是一個有特定屬性的 Javascript 物件，代表著 An unit of work for React to process

• React 16 class component 轉為 functional component

• React Hook

Fiber 可以

• 將畫面渲染的任務分成 chunks

• 不同任務可以經過 priortize 區分優先級

• 可以重複使用之前的 work 或將不需要的 work 丟棄

• 可以暫停目前的工作處理完更高優先級的任務後再回來繼續處理

這些其實是為了避免畫面卡頓或是沒有內容的白屏畫面這倆種糟糕的使用者體驗，而這些大多數都是 CPU 瓶頸或 IO 瓶頸導致的

JSX → React Create Element → React Element

在 React Fiber 之後

JSX → React Create Element → React Element → Fiber Node

其中 React Element 轉 Fiber 是透過 createFiberFromTypeAndProps

React Reconciliation

React 的更新是透過比對 Virtual DOM 前後的 Diff 後再更新真實的 DOM 藉此來減少渲染次數，這個 Diff 的過程稱作為 reconciliation

React 靠著 啟發式 (heuristic)演算法 將原本需要 O(n³) 的 diff 流程壓到了 O(n)，而這個演算法是建立在兩個假設之上

1. 不同的 element 會產生不同的 tree

2. key prop 指出哪些 elements 在不同次的 render 可以保持不變

在 fiber 架構以前 React 渲染頁面會經過兩個 Stage

1. Reconciler - 主要是找出變動的元件，也就是剛剛的演算法，然後又可以細分成兩個階段

   1. Render Phase - React 根據數據生成新的 Virtual DOM 接著透過 Diff 演算法找出需要更新的部分放入 update queue 中

   2. Commit Phase - React 把剛剛的 update queue 遍歷一次後將需要更新的部分一次性選染到 DOM 上

2. Render - 負責將變化的元件渲染到畫面上

   1. React 除了可以開發網頁還有 React Native 開發 Mobile APP，React 360 還可以開發 AR，React 透過把 reconciliation 的實作在 react core library 並且把 render 不同裝置的實作交給不同的 render 來達成 Learn once, write anywhere

在 Fiber 之後又多了一個 scheduler 機制，在這個階段來調度工作來處理前面說到的 chunks 的優先度